<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>VideoShop</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" />
    <link rel="stylesheet" type="text/css" href="indexStyle.css">
    <script src="carousel.js"></script>
</head>

<body>
    <header>
        <table class="headerTable">
            <tr>
                <td>
                    <img src="img/logo.png" alt="VideoShop Logo" onclick="location.href='index.html'" class="logo">
                </td>
                <td>
                    <h1 onclick="location.href='index.html'">VideoShop</h1>
                </td>
                <td>
                    <form action="/search" method="get">
                        <input type="search" placeholder="请输入视频名称">
                        <input type="image" src="img/search.png">
                    </form>
                </td>
                <td class="menuTd">
                    <div class="menuTitle">分区</div>
                    <ul class="submenu">
                        <li onclick="location.href='games.html'">游戏</li>
                        <li onclick="location.href='movies.html'">电影</li>
                        <li onclick="location.href='anime.html'">动漫</li>
                    </ul>
                </td>
                <td>
                    <button onclick="location.href='upload.html'" class="uploadButton">上传视频</button>
                </td>
            </tr>
        </table>
    </header>
    <main>
        <table>
            <tr>
                <td>
                    <!--轮播图-->
                    <div class="carousel">
                        <div><img src="img/video1.jpg" alt="Video 1" onclick="location.href='video.html?title=视频1标题'">
                        </div>
                        <div><img src="img/video2.png" alt="Video 2" onclick="location.href='video.html?title=视频2标题'">
                        </div>
                        <div><img src="img/video3.png" alt="Video 3" onclick="location.href='video.html?title=视频3标题'">
                        </div>
                        <!-- Add more videos for the carousel as needed -->
                    </div>
                </td>
                <td>
                    <!--右侧的视频列表-->
                    <div class="video-listRight">
                        <table>
                            <tr>
                                <td><img src="img/video4.jpg" alt="Video 4"
                                        onclick="location.href='video.html?title=像美国电影摄影师协会的摄影指导一样设计你的DP车'"><br>
                                    <a href="video.html?title=像美国电影摄影师协会的摄影指导一样设计你的DP车">像美国电影摄影师协会的摄影指导一样设计你的DP车</a>
                                </td>
                                <td><img src="img/video6.jpg" alt="Video 6" onclick="location.href='video.html?title=《重返未来：1999》EP | 极夜 Полярная ночь'"><br>
                                    <a href="video.html?title=《重返未来：1999》EP | 极夜 Полярная ночь">《重返未来：1999》EP | 极夜
                                        Полярная ночь</a>
                                </td>
                            </tr>
                            <tr>
                                <td><img src="img/video5.jpg" alt="Video 5"
                                        onclick="location.href='video.html?title=《福》同人微电影'"><br>
                                    <a href="video.html?video=video5.mp4">《福》同人微电影</a>
                                </td>
                                <td><img src="img/video7.jpg" alt="Video 7"
                                        onclick="location.href='video.html?title=2024款iPad Pro&Air开箱'"><br>
                                    <a href="video.html?title=2024款iPad Pro&Air开箱">2024款iPad Pro&Air开箱</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
        <!--下方的视频列表-->
        <div class="video-listBottom" id="bottomVideo">
            <table>
                <tr>
                    <td><img src="img/video8.jpg" alt="Video 8"
                            onclick="location.href='video.html?title=为什么ROOT这一用户本该拥有的权利，正在慢慢消失？'"><br /><a
                            href="video.html?title=为什么ROOT这一用户本该拥有的权利，正在慢慢消失？">为什么ROOT这一用户本该拥有的权利，正在慢慢消失？</a></td>
                    <td><img src="img/video9.jpg" alt="Video 9" onclick="location.href='video.html?title=去了一趟法国。'"><br>
                        <a href="video.html?title=去了一趟法国。">去了一趟法国。</a></td>
                    <td><img src="img/video10.jpg" alt="Video 10" onclick="location.href='video.html?title=时代的领路人——索尼'"><br>
                        <a href="video.html?title=时代的领路人——索尼">时代的领路人——索尼</a></td>
                </tr>
                <tr>
                    <td><img src="img/video11.jpg" alt="Video 11"
                            onclick="location.href='video.html?title=请杀死自己的学生思维！'"><br /><a
                            href="video.html?title=请杀死自己的学生思维！">请杀死自己的学生思维！</a></td>
                    <td><img src="img/video12.jpg" alt="Video 12" onclick="location.href='video.html?title=答疑解惑：“〇”是汉字吗？它有几个笔画？'"><br>
                        <a href="video.html?title=答疑解惑：“〇”是汉字吗？它有几个笔画？">答疑解惑：“〇”是汉字吗？它有几个笔画？</a></td>
                    <td><img src="img/video13.jpg" alt="Video 13" onclick="location.href='video.html?title=我的硕士论文创新点'"><br>
                        <a href="video.html?title=我的硕士论文创新点">我的硕士论文创新点</a></td>
                </tr>
            </table>
        </div>

    </main>
</body>

</html>